import { View } from '@tarojs/components'
import s from './index.module.scss'
import ListRow from 'components/ListRow'
import Icon from 'components/Icon'

const pages = [
  { key: 'pages/color/index',
    title: '背景颜色'
  }, {
    key: 'pages/position/index',
    title: '背景位置'
  }, {
    key: 'pages/size/index',
    title: '背景大小'
  }, {
    key: 'pages/all/index',
    title: '背景属性'
  }, {
    key: 'pages/filter/index',
    title: '背景滤镜(灰值)'
  }
]
interface bgprops {
  navigateTo: any,
  back: any,
  config: any
}

export default function Index(props: bgprops) {
  const {navigateTo, back, config} = props

  return (
    <View className={s.page}>
      <View className={s.navigation_bar}>
        <View className={s.return} onClick={() => { back() }}>
          <Icon name='chevron-up' size={30} style={{ transform: `rotate(${-90}deg)` }} />
        </View>
        <View className={s.nabigation_title}>{config.title || ''}</View>
      </View>
      {pages.map((item) =>(
        <View className={s.btn}
          onClick={() => {
            navigateTo(item.key)

          }}
        >
          <ListRow title={item.title}/>
        </View>
      ))}
    </View>
  )
}